<template>
    <section>
        <el-card :body-style="{ padding: '20px' }">
            <template #header>
                <span>课题详情</span>
            </template>
            <template #default>
                <el-tabs v-model="currentPage" class="demo-tabs" type="border-card" @tab-remove="handleRemove">
                    <el-tab-pane label="首页" name="first">
                        <info v-if="currentPage === 'first'"></info>
                    </el-tab-pane>
                    <el-tab-pane label="人员改动" name="second" :disabled="subjectStore.authority === -1">
                        <role v-if="currentPage === 'second'"></role>
                    </el-tab-pane>
                    <el-tab-pane
                        label="课题改动"
                        name="third"
                        :disabled="subjectStore.authority !== 0 || subjectStore.currentInfo.status !== 0"
                    >
                        <setting v-if="currentPage === 'third'"></setting>
                    </el-tab-pane>
                    <el-tab-pane
                        v-for="(item, index) in asyncPageList"
                        :label="item.label"
                        :name="item.name"
                        :key="index"
                        :closable="true"
                    >
                        <log :id="item.props" :name="item.name" v-if="item.component === 'log'"></log>
                        <schedule :id="item.props" :name="item.name" v-if="item.component === 'schedule'"></schedule>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </el-card>
    </section>
</template>

<script setup lang="ts">
import { watchEffect, defineAsyncComponent, onBeforeUnmount } from "vue";
import { useRoute } from "vue-router";
import useSubjectStore from "@/store/modules/subject";
import useLayOutSettingStore from "@/store/modules/setting";
import { ElMessageBox } from "element-plus";
// 引入四个异步组件
const info = defineAsyncComponent(() => import("./info/index.vue"));
const log = defineAsyncComponent(() => import("./log/index.vue"));
const schedule = defineAsyncComponent(() => import("./schedule/index.vue"));
const role = defineAsyncComponent(() => import("./role/index.vue"));
const setting = defineAsyncComponent(() => import("./setting/index.vue"));

import { storeToRefs } from "pinia";
const route = useRoute();
const subjectStore = useSubjectStore();
const layOutSettingStore = useLayOutSettingStore();
// 当前标签页
const { currentPage, asyncPageList } = storeToRefs(subjectStore);
// 折叠菜单
const oldFold = layOutSettingStore.fold;
layOutSettingStore.fold = true;

watchEffect(() => {
    // 在watchEffect中执行，当params发生变化时就调用仓库更新身份，在全局守卫也可以实现，但是代码过于臃肿，路由独享守卫监听不到参数的变化
    subjectStore.init(route.params.subjectId as string);
});

// 标签页关闭
const handleRemove = (name: string) => {
    ElMessageBox.confirm("确认关闭当前页面吗？未保存的内容将会丢失！", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    }).then(
        () => {
            subjectStore.removePage(name);
            subjectStore.backSubjectHome();
        },
        () => {},
    );
};

// 离开前恢复到原本的设置
onBeforeUnmount(() => {
    layOutSettingStore.fold = oldFold;
});
</script>

<style lang="scss" scoped></style>
